<template>
  <div class="bg-white rounded-lg shadow p-4 lg:p-6">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-xl font-semibold text-gray-700">团队成员</h2>
      <button @click="addMember" class="text-sm text-indigo-600 hover:text-indigo-800 flex items-center">
        添加成员
      </button>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 lg:grid-cols-3 gap-4">
      <div v-for="(member, index) in modelValue" :key="member.id || index"
        class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start mb-3">
          <input v-model="member.name" type="text" placeholder="成员姓名"
            class="text-lg font-medium border-b border-transparent focus:border-gray-300 focus:outline-none">
          <button @click="removeMember(index)" class="text-red-500 hover:text-red-700">
            删除
          </button>
        </div>

        <div class="flex items-center mb-3">
          <div class="bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mr-4">
            <span class="text-gray-600 text-xl">{{ member.name.charAt(0) }}</span>
          </div>
          <div class="flex-1">
            <input v-model="member.role" type="text" placeholder="职位"
              class="w-full px-2 py-1 text-sm border border-gray-200 rounded focus:outline-none focus:ring-1 focus:ring-indigo-500 mb-2">
            <input v-model="member.avatar" type="text" placeholder="头像"
              class="w-full px-2 py-1 text-sm border border-gray-200 rounded focus:outline-none focus:ring-1 focus:ring-indigo-500">
          </div>
        </div>
        <!-- 
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input v-model="member.is_leadership" type="checkbox" :id="'leadership-' + index"
              class="h-4 w-4 text-indigo-600 rounded focus:ring-indigo-500">
            <label :for="'leadership-' + index" class="ml-2 text-sm text-gray-600">管理层</label>
          </div>

          <input v-model="member.sort_order" type="number" min="0" max="100"
            class="w-20 px-2 py-1 text-sm border border-gray-200 rounded focus:outline-none focus:ring-1 focus:ring-indigo-500">
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { TeamMember } from '~/types/home';

const props = defineProps<{
  modelValue: TeamMember[];
}>()

const emit = defineEmits(['update:modelValue'])

const addMember = () => {
  const newMembers = [...props.modelValue, {
    name: '',
    role: '',
    avatar: '',
    border_color_class: 'border-indigo-100',
    sort_order: props.modelValue.length + 1,
    is_leadership: false
  }]
  emit('update:modelValue', newMembers)
}

const removeMember = (index: number) => {
  const newMembers = [...props.modelValue]
  newMembers.splice(index, 1)
  emit('update:modelValue', newMembers)
}
</script>